<template>
  <div>
    <van-nav-bar
      title="分类"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <FanHui></FanHui>
    <van-tabs v-model="activeName" sticky animated @change="qieHuan" swipeable>
      <van-tab
        :title="item.name"
        v-for="item in brotherCategory"
        :key="item.id"
        :name="item.id"
      >
        <div class="title">
          <img :src="item.banner_url" alt="" width="100%" />
          <h3>{{ item.name }}</h3>
          <p>{{ item.front_name }}</p>
        </div>

        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text="我是有底线的"
          :offset="50"
          @load="onLoad"
        >
          <Products :goodsList="goodsList"></Products>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCategory, getFenLeiList } from "@/request/api.js";
import Products from "@/components/Products.vue";
import FanHui from "@/components/FanHui.vue";
export default {
  name: "CateGoryTabLan",
  components: {
    Products,
    FanHui,
  },
  data() {
    return {
      activeName: null,
      brotherCategory: [],
      goodsList: [],
      page: 1,
      size: 200,
      loading: false,
      finished: false,
      name: null,
      isLeave: false,
    };
  },
  async created() {
    // 获取分类参数
    const res = await getCategory({ id: this.$route.query.id });
    if (res.errno == 0) {
      this.brotherCategory = res.data.brotherCategory;
    }
  },
  mounted() {},
  methods: {
    // tab栏切换事件
    async qieHuan(name) {
      console.log(name);
      if (this.name != name) {
        this.page = 1;
        this.goodsList = [];
        this.loading = false;
        this.finished = false;
      }
      this.name = name;
      // 获取分类列表
      const res = await getFenLeiList({
        categoryId: this.name,
        page: this.page,
        size: this.size,
      });
      this.page++;
      if (res.errno == 0) {
        this.goodsList = [...this.goodsList, ...res.data.goodsList];
        this.loading = false;
        if (res.data.goodsList.length == 0) this.finished = true;
      }
    },
    onLoad() {
      this.loading = false;
    },
  },
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        if(oldVal === '/home') this.isLeave = false
      },
      // immediate: true,
    },
  },
  activated() {
    if (!this.isLeave) {
      const id = this.$route.query.id;
      this.activeName = Number(id);
      this.qieHuan(id);
    }
  },
  // 路由离开 - 触发(保存滚动位置)
  beforeRouteLeave(to, from, next) {
    from.meta.scrollTop = window.scrollY;
    this.isLeave = true
    next();
  },
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  position: relative;
  img {
    width: 100%;
    box-shadow: 0 0 6px #000;
    filter: brightness(0.5);
  }

  h3 {
    font-size: 0.2rem;
    padding: 0.2rem;
    background-color: #fff;
  }
  p {
    font-size: 0.16rem;
    position: absolute;
    top: 0.6rem;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
  }
}
</style>
